<template>
    <div class="green">
        <!--地图-->
        <div id="myMap"></div>
        <!-- 头部区域 -->
        <header>
            <!-- 项目标题 -->
            <p class="title-name">
                <span>城市管理园林绿化管理平台</span>
            </p>
            <!-- 道路绿化养护一张图 -->
            <div id="left_title" class="deadline-box" @click="changeTitle">{{leftTitle}}</div>
            <!-- 头部背景图 -->
            <div class="header-bg"></div>
            <!-- 头部底端光点 -->
            <div class="bottom-light"></div>
            <!-- 中央“道路绿化养护一张图” -->
            <div id="head_title" class="center-text">{{headTitle}}</div>
            <!-- 右上角“展开”、“收起”按钮 -->
            <div class="collapse-box">
                <img id="openPage" @click="openPage" src="../../assets/img/green/open.png" title="展开" alt="展开">
                <img id="closePage" @click="closePage" src="../../assets/img/green/close.png" title="收起" alt="收起">
            </div>
        </header>
        <!-- 主体内容 -->
        <section class="main-box">
            <div class="content-area">
                <div class="left-title-name">
                    <span>道路绿化</span>
                </div>
                <div class="content-area-info">
                    <div class="left-content-row">
                        <!-- 道路绿化 -->
                        <div class="border-box road-green">
                            <div class="top-light-img"></div>
                            <ul class="greenmsg-box">
                                <li class="green-item">
                                    <span>
                                        <span id="green_road_count">110</span>
                                        <span>条</span>
                                    </span>
                                    <span>绿化道路</span>
                                </li>
                                <li class="green-item">
                                    <span>
                                        <span>6.48</span>
                                        <span>km²</span>
                                    </span>
                                    <span>绿化面积</span>
                                </li>
                                <li class="green-item">
                                    <span>
                                        <span>23.50</span>
                                        <span>%</span>
                                    </span>
                                    <span>道路绿化覆盖率</span>
                                </li>
                            </ul>
                        </div>
                        <!-- 绿化覆盖 -->
                        <div class="border-box every-title-name">
                            <div class="bottom-light-img"></div>
                            <span>绿化覆盖</span>
                        </div>
                        <div class="border-box green-cover">
                            <div class="top-light-img"></div>
                            <ul class="cover-top">
                                <li class="cover-item">
                                    <span>
                                        <span>58.44</span>
                                        <span>km²</span>
                                    </span>
                                    <span>建成区绿化覆盖总面积</span>
                                </li>
                                <li class="cover-item">
                                    <span>
                                        <span>43.21</span>
                                        <span>%</span>
                                    </span>
                                    <span>建成区绿化覆盖率</span>
                                </li>
                            </ul>
                            <div id="coverChart"></div>
                        </div>
                        <!-- 公园广场名称 -->
                        <div class="border-box every-title-name">
                            <div class="bottom-light-img"></div>
                            <span>公园广场</span>
                        </div>
                        <!-- 公园广场列表 -->
                        <div class="border-box park-square">
                            <div class="top-light-img"></div>
                            <div class="overflow-box">
                                <div class="bridge-switch-block">
                                    <div id="conSwitchLeft" @click="showPark()" class="con-switch-left switch-block-active">城市公园</div>
                                    <div id="conSwitchRight" @click="showSquare()" class="con-switch-right switch-block-no">城市广场</div>
                                </div>
                                <!--城市公园-->
                                <div id="park">
                                    <ul class="park-box">
                                        <li class="park-item">
                                            <span>
                                                <span id="park_count">10</span>
                                                <span>个</span>
                                            </span>
                                            <span>城市公园</span>
                                        </li>
                                        <li class="park-item">
                                            <span>
                                                <span>6.48</span>
                                                <span>%</span>
                                            </span>
                                            <span>15分钟到达率</span>
                                        </li>
                                        <li class="park-item">
                                            <span>
                                                <span>23.50</span>
                                                <span>%</span>
                                            </span>
                                            <span>绿地服务半径覆盖率</span>
                                        </li>
                                    </ul>
                                    <div class="table-head">
                                        <table>
                                            <tr>
                                                <td>名称</td>
                                                <td>地址</td>
                                                <td>所属街办</td>
                                                <td>总面积㎡</td>
                                                <td>绿化面积㎡</td>
                                            </tr>
                                        </table>
                                    </div>
                                    <div id="parkTableBody" class="table-body">
                                        <div id="parkTableBodyBox">
                                            <table>
                                                <tr>
                                                    <td>永阳公园</td>
                                                    <td>唐延路科技路六路</td>
                                                    <td>丈八</td>
                                                    <td>1255</td>
                                                    <td>23654</td>
                                                </tr>
                                                <tr>
                                                    <td>永阳公园</td>
                                                    <td>唐延路科技路六路</td>
                                                    <td>丈八</td>
                                                    <td>1255</td>
                                                    <td>23654</td>
                                                </tr>
                                                <tr>
                                                    <td>永阳公园</td>
                                                    <td>唐延路科技路六路</td>
                                                    <td>丈八</td>
                                                    <td>1255</td>
                                                    <td>23654</td>
                                                </tr>
                                                <tr>
                                                    <td>永阳公园</td>
                                                    <td>唐延路科技路六路</td>
                                                    <td>丈八</td>
                                                    <td>1255</td>
                                                    <td>23654</td>
                                                </tr>
                                                <tr>
                                                    <td>永阳公园</td>
                                                    <td>唐延路科技路六路</td>
                                                    <td>丈八</td>
                                                    <td>1255</td>
                                                    <td>23654</td>
                                                </tr>
                                            </table>
                                        </div>
                                        <div id="parkTableBodyBox1"></div>
                                    </div>
                                </div>
                                <!--城市广场-->
                                <div id="square" style="display: none;">
                                    <ul class="park-box">
                                        <li class="park-item">
                                            <span>
                                                <span id="square_count">9</span>
                                                <span>个</span>
                                            </span>
                                            <span>城市广场</span>
                                        </li>
                                        <li class="park-item">
                                            <span>
                                                <span>0.28</span>
                                                <span>km²</span>
                                            </span>
                                            <span>广场总面积</span>
                                        </li>
                                        <li class="park-item">
                                            <span>
                                                <span>30</span>
                                                <span>%</span>
                                            </span>
                                            <span>广场服务半径覆盖率</span>
                                        </li>
                                    </ul>
                                    <div class="table-head">
                                        <table>
                                            <tr>
                                                <td>名称</td>
                                                <td>地址</td>
                                                <td>所属街办</td>
                                                <td>总面积㎡</td>
                                                <td>绿化面积㎡</td>
                                            </tr>
                                        </table>
                                    </div>
                                    <div id="squareTableBody" class="table-body">
                                        <div id="squareTableBodyBox">
                                            <table>
                                                <tr>
                                                    <td>永阳公园</td>
                                                    <td>唐延路科技路六路</td>
                                                    <td>丈八</td>
                                                    <td>1255</td>
                                                    <td>23654</td>
                                                </tr>
                                                <tr>
                                                    <td>永阳公园</td>
                                                    <td>唐延路科技路六路</td>
                                                    <td>丈八</td>
                                                    <td>1255</td>
                                                    <td>23654</td>
                                                </tr>
                                                <tr>
                                                    <td>永阳公园</td>
                                                    <td>唐延路科技路六路</td>
                                                    <td>丈八</td>
                                                    <td>1255</td>
                                                    <td>23654</td>
                                                </tr>
                                                <tr>
                                                    <td>永阳公园</td>
                                                    <td>唐延路科技路六路</td>
                                                    <td>丈八</td>
                                                    <td>1255</td>
                                                    <td>23654</td>
                                                </tr>
                                                <tr>
                                                    <td>永阳公园</td>
                                                    <td>唐延路科技路六路</td>
                                                    <td>丈八</td>
                                                    <td>1255</td>
                                                    <td>23654</td>
                                                </tr>
                                            </table>
                                        </div>
                                        <div id="squareTableBodyBox1"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="center-content-row"></div>
                    <div class="right-content-row">
                        <!-- 道路巡查情况名称 -->
                        <div class="border-box every-title-name">
                            <div class="bottom-light-img"></div>
                            <span>道路巡查情况</span>
                            <span id="endTime">截至：2020年10月20日</span>
                        </div>
                        <!-- 道路巡查情况统计图 -->
                        <div class="border-box case-statistics">
                            <div class="top-light-img"></div>
                            <div class="overflow-box road-other-data">
                                <ul class="left-case-data">
                                    <li>
                                        <p>案件总量：<span id="caseNum">676</span>件</p>
                                        <p>已转办：<span id="transferred">124</span>件</p>
                                        <p>未转办：<span id="noTransferred">124</span>件</p>
                                    </li>
                                    <li>
                                        <p>结案率：<span id="closingRate">87%</span></p>
                                        <p>按时：<span id="onTime">87%</span>超时：<span id="overtime">87%</span></p>
                                    </li>
                                </ul>
                                <div id="rightChart"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--图例-->
        <div id="legend" class="ntl">
            <p><i style="background: #EA256A;"></i>一级</p>
            <p><i style="background: #01F72F;"></i>二级</p>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Green",
        data(){
            return {
                //地图
                GDMap: null,
                //城市公园时间函数
                parkMar: null,
                //城市广场时间函数
                squarekMar: null,
                //左上角标题
                leftTitle: '绿化管理边界一张图',
                //中间标题
                headTitle: '道路绿化一张图',
                //标题标识
                titleFlag: true,
                //控制右上角展开和关闭标识
                pageFlag: true,
            }
        },
        mounted(){
            // 高德地图初始化
            this.initMap();
            //初始化绿化覆盖统计图
            this.initcoveChart();

            //城市公园列表滚动
            this.listScrolling( 'parkTableBodyBox1', 'parkTableBodyBox', 'parkTableBody', 'parkMar' );

            //初始化道路巡查其他统计统计图
            this.initRoadOtherChart();
        },
        methods:{
            /**
             * Description: 初始化绿化覆盖统计图
             * Author:cy
             * Date:2020/12/17
             */
            initcoveChart(){
                let myChart = this.$echarts.init(document.getElementById('coverChart'));
                let option = {
                    tooltip:{
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '0%',
                        top: '13%',
                        bottom: '4%',
                        containLabel: true
                    },
                    legend: {
                        right: -5,
                        data:['覆盖面积（km²）', '占比（%）'],
                        textStyle: {
                            color: '#fff'
                        },
                        itemWidth: 20
                    },
                    xAxis: {
                        type: 'category',
                        data: ['道路', '居住区', '单位附属', '公园', '城市广场', '生产', '耕地', '其他'],
                        // 坐标轴刻度标签
                        axisLabel: {
                            show: true,
                            interval: 0,
                            textStyle: {
                                color: '#64cefe'
                            }
                        },
                        axisTick: {
                            show: false //隐藏X轴刻度
                        },
                        //boundaryGap: false,
                    },
                    yAxis: [
                        {
                            type: 'value',
                            // 坐标轴刻度标签
                            axisLabel: {
                                textStyle: {
                                    color: '#64cefe'
                                },
                                fontSize: 10,
                                verticalAlign: 'center'
                            },
                            axisTick: {
                                show: false //隐藏X轴刻度
                            },
                            // 坐标轴轴线
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: 'rgba(77,77,77,0.5)'
                                }
                            },
                            axisLine: {
                                show: false
                            }
                        },
                        {
                            type: 'value',
                            //min: 10,
                            //max: 60,
                            // 坐标轴刻度标签
                            axisLabel: {
                                textStyle: {
                                    color: '#64cefe'
                                },
                                formatter: '{value} %',
                                fontSize: 10
                            },
                            // 坐标区域分割线
                            splitLine: {
                                show: false,
                            },
                            axisTick: {
                                // 是否显示刻度线
                                show: false
                            },
                            axisLine: {
                                show: false
                            }
                        }
                    ],
                    series: [
                        {
                            name: '覆盖面积（km²）',
                            color: '#01F72F',
                            data: [200, 260, 300, 235, 180, 250, 250, 180],
                            type: 'bar',
                            barWidth: '16px',
                            itemStyle: {
                                color:'#01F72F',
                            }
                        },
                        {
                            name: '占比（%）',
                            type: 'line',
                            smooth: true, //平滑曲线显示
                            yAxisIndex: 1,
                            data: [130, 100, 170, 25, 130, 100, 130, 60],
                            symbolSize: 7,
                            lineStyle: {
                                color: '#EA256A',
                                width: 2,
                                borderColor: '#EA256A',
                            },
                            areaStyle: {
                                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(234, 37, 106, 0.6)'
                                },
                                    {
                                        offset: 1,
                                        color: 'rgba(234, 37, 106, 0)'
                                    }])
                            },
                        }
                    ]
                };
                //使用制定的配置项和数据显示图表
                myChart.setOption(option);
                window.addEventListener('resize',function () {
                    myChart.resize()
                })
            },
            /**
             * Description:城市公园和城市广场切换
             * Author:cy
             * Date:2020/12/16
             */
            //城市公园
            showPark(){
                this.switchTaskBlock(1);
                if (this.parkMar) {
                    clearInterval(this.parkMar);
                    this.parkMar = null;
                }
                this.listScrolling( 'parkTableBodyBox1', 'parkTableBodyBox', 'parkTableBody', 'parkMar' );
            },
            //城市广场
            showSquare(){
                this.switchTaskBlock(2);
                if (this.squarekMar) {
                    clearInterval(this.squarekMar);
                    this.squarekMar = null;
                }
                this.listScrolling( 'squareTableBodyBox1', 'squareTableBodyBox', 'squareTableBody', 'squarekMar' );
            },
            //城市公园和城市广场切换事件
            switchTaskBlock (type) {
                if (type === 1) {
                    $('#conSwitchLeft').removeClass('switch-block-no').addClass('switch-block-active');
                    $('#conSwitchRight').removeClass('switch-block-active').addClass('switch-block-no');
                    $('#park').show();
                    $('#square').hide();
                } else if (type === 2) {
                    $('#conSwitchLeft').removeClass('switch-block-active').addClass('switch-block-no');
                    $('#conSwitchRight').removeClass('switch-block-no').addClass('switch-block-active');
                    $('#park').hide();
                    $('#square').show();
                }
            },
            //城市公园和城市广场列表滚动事件
            listScrolling( bodyBox1, bodyBox, tableBody, myMar ) {
                let speed = 50;
                document.getElementById(bodyBox1).innerHTML = document.getElementById(bodyBox).innerHTML;
                function Marquee() {
                    if (document.getElementById(bodyBox1).offsetHeight - document.getElementById(tableBody).scrollTop <= 0) {
                        document.getElementById(tableBody).scrollTop -= document.getElementById(bodyBox).offsetHeight;
                    } else {
                        document.getElementById(tableBody).scrollTop++;
                    }
                }
                this[myMar] = setInterval(Marquee, speed);
                document.getElementById(tableBody).onmouseover = () => {
                    clearInterval(this[myMar]);
                }
                document.getElementById(tableBody).onmouseout = () => {
                    this[myMar] = setInterval(Marquee, speed);
                }
            },
            /**
             * Description: 初始化道路巡查其他统计统计图
             * Author:cy
             * Date:2020/12/17
             */
            initRoadOtherChart(){
                //初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("rightChart"));
                let index = 0;
                let colorList = ['#9e101e', '#a02713', '#a04212', '#a0570e', '#eaad1b'];
                let option = {
                    legend: {
                        show: false
                    },
                    grid: {
                        left: '42%',
                        right: '5%',
                        top: '5%',
                        bottom: '5%',
                    },
                    xAxis: {
                        type: 'value',

                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        }
                    },
                    yAxis: {
                        type: 'category',
                        inverse: true,
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisPointer: {
                            label: {
                                show: true,
                                margin: 30
                            }
                        },
                        data: ['垃圾堆积', '共享单车乱停放', '井盖丢失', '道路破损', '交通标线不清楚'],
                        axisLabel: {
                            margin: 140,
                            fontSize: 14,
                            align: 'left',
                            color: '#ffffff',
                            rich: {
                                a1: {
                                    color: '#fff',
                                    backgroundColor: colorList[0],
                                    width: 20,
                                    height: 20,
                                    align: 'center',
                                    borderRadius: 2
                                },
                                a2: {
                                    color: '#fff',
                                    backgroundColor: colorList[1],
                                    width: 20,
                                    height: 20,
                                    align: 'center',
                                    borderRadius: 2
                                },
                                a3: {
                                    color: '#fff',
                                    backgroundColor: colorList[2],
                                    width: 20,
                                    height: 20,
                                    align: 'center',
                                    borderRadius: 2
                                },
                                a4: {
                                    color: '#fff',
                                    backgroundColor: colorList[3],
                                    width: 20,
                                    height: 20,
                                    align: 'center',
                                    borderRadius: 2
                                },
                                a5: {
                                    color: '#fff',
                                    backgroundColor: colorList[4],
                                    width: 20,
                                    height: 20,
                                    align: 'center',
                                    borderRadius: 2
                                }
                            },
                            formatter: function(params) {
                                index++;
                                if (index > 5) {
                                    index = 1
                                }
                                return [
                                    '{a' + index + '|' + index + '}' + '  ' + params
                                ].join('\n')
                            }
                        }
                    },
                    series: [{
                        z: 2,
                        name: 'value',
                        type: 'bar',
                        data: [3.66, 2.86, 1.82, 1.8, 1.53].map((item, i) => {
                            let itemStyle = {
                                color: colorList[i]
                            }
                            return {
                                value: item,
                                itemStyle: itemStyle
                            };
                        }),
                        barWidth: 15,
                        label: {
                            show: true,
                            position: [0,2],
                            color: '#ffffff',
                            fontSize: 12,
                            offset: [5, 0]
                        }
                    }

                    ]
                };
                //使用制定的配置项和数据显示图表
                myChart.setOption(option);
                window.addEventListener("resize", function() {
                    myChart.resize();
                });
            },
            /**
             * Description:点击左上角标题，中间的提示改变
             * Author:cy
             * Date:2020/12/17
             */
            changeTitle(){
                if(this.titleFlag){
                    this.leftTitle = '道路绿化一张图';
                    this.headTitle = '绿化管理边界一张图';
                    this.titleFlag = false;
                }else{
                    this.leftTitle = '绿化管理边界一张图';
                    this.headTitle = '道路绿化一张图';
                    this.titleFlag = true;
                }

            },
            /**
             * Description:右上角展开和关闭
             * Author:cy
             * Date:2020/12/17
             */
            openPage(){
                $('#openPage').css('display', 'none');
                $('#closePage').css('display', 'block');
                $('.left-content-row').css('transform', 'translateX(0px)');
                $('.left-content-row').css('transition', 'transform 0.4s');
                $('.right-content-row').css('transform', 'translateX(0px)');
                $('.right-content-row').css('transition', 'transform 0.4s');
                $('.left-title-name').css('transform', 'translateX(0px)');
                $('.left-title-name').css('transition', 'transform 0.4s');

                $('#legend').css('transform', 'translateY(0px)');
                $('#legend').css('transition', 'transform 0.4s');
            },
            closePage(){
                $('#openPage').css('display', 'block');
                $('#closePage').css('display', 'none');
                $('.left-content-row').css('transform', 'translateX(-7.5rem)');
                $('.left-content-row').css('transition', 'transform 0.4s');
                $('.right-content-row').css('transform', 'translateX(7.5rem)');
                $('.right-content-row').css('transition', 'transform 0.4s');
                $('.left-title-name').css('transform', 'translateX(-7.5rem)');
                $('.left-title-name').css('transition', 'transform 0.4s');

                setTimeout( () => {
                    $('#legend').css('transform', 'translateY(3.375rem)');
                    $('#legend').css('transition', 'transform 0.4s');
                },300)
            },
            /**
             * Description: 高德地图初始化
             * Author:cy
             * Date:2020/12/17
             */
            initMap() {
                this.GDMap = new AMap.Map("myMap", {
                    mapStyle: "amap://styles/6f8a9c431c03a423de43182d250f1a75",
                    zoom: 14,
                    viewMode: "3D",
                    center: [108.976877, 34.222629],
                    features: ["bg", "road", "building"],
                    resizeEnable: true
                });
                this.GDMap.setFitView();// 执行定位
            }
        }
    }
</script>

<style scoped  lang="less">
    .green{
        display: flex;
        flex-direction: column;
        background-color: #04093f;
        line-height: 1.15;
        position: relative;
        overflow-x: hidden;
        cursor: default;
        height: 13.5rem;
        width: 100%;
        user-select: none;
        .ntl {
            position: absolute;
            right: 0.3rem;
            bottom: 3.6rem;
            z-index: 99;
            color: #ffffff;
            padding: 0.125rem;
            background: rgba(3, 3, 44, 0.6);
            border: 2px solid #01648a;
            border-radius: 0.0625rem;
            p, div {
                line-height: 0.3rem;
                i{
                    display: inline-block;
                    width: 0.25rem;
                    height: 0.2rem;
                    vertical-align: -0.05rem;
                    border-radius: 0.0375rem;
                    margin-right: 0.125rem;
                }
            }
        }
        #myMap {
            width: 24rem;
            height: 13.5rem;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }
        /* 头部样式 */
        header {
            height: 1.375rem;
            padding-top: 0.32rem;
            position: relative;
            background: linear-gradient(to bottom, rgba(0, 1, 39, 1),rgba(4, 9, 63, 0.9));
            z-index: 99;
            .title-name{
                height: 1.125rem;
                line-height: 0.9rem;
                text-align: center;
                position: relative;
                /*z-index: 100;*/
                span {
                    font-size: 0.7125rem;
                    /* 引入外部字体样式 */
                    font-family: 'MF-FangHei';
                    background: linear-gradient(to right, #0178f7, #00ebfe, #00ebfe, #00a9ff);
                    -webkit-background-clip: text;
                    color: transparent;
                }
            }
            .deadline-box{
                position: absolute;
                left: 0.25rem;
                top: 0.3rem;
                width: 2.7875rem;
                height: 0.525rem;
                line-height: 0.525rem;
                text-align: center;
                color:#08faf5;
                font-family: 'FZLTZH_GBK';
                font-size: 0.22rem;
                background: url(../../assets/img/green/small-border.png) no-repeat;
                z-index: 100;
                cursor: pointer;
            }
            .header-bg{
                position: absolute;
                bottom: 0;
                width: 100%;
                height: 0.7375rem;
                background: url(../../assets/img/green/header-border.png) no-repeat;
                background-size: 100% 100%;
            }
            .bottom-light{
                position: absolute;
                bottom: -0.8125rem;
                left: calc(50% - 4.7875rem);
                width: 9.5875rem;
                height: 1.6625rem;
                background: url(../../assets/img/green/big-light.png) no-repeat;
                background-size: 100% 100%;
                z-index: 100;
            }
            .center-text{
                position: absolute;
                left: calc(50% - 2.05rem);
                top: 1.35rem;
                width: 4.1rem;
                height: 0.7625rem;
                line-height: 0.7625rem;
                text-align: center;
                color:#08faf5;
                font-family: 'FZLTZH_GBK';
                font-size: 0.35rem;
                background: url(../../assets/img/green/big-border.png) no-repeat;
            }
            .collapse-box{
                position: absolute;
                top: 0.15rem;
                right: 0.275rem;
                img{
                    width: 0.4rem;
                    height: 0.325rem;
                    cursor: pointer;
                }
                #openPage{
                    display: none;
                }
                #closePage{
                    display: block;
                }
            }
        }

        /* 主体内容样式 */
        .main-box{
            display: flex;
            flex: 1;
            font-family: 'FZLTZH_GBK';
            .content-area{
                display: flex;
                flex: 1;
                position: relative;
                .left-title-name{
                    position: absolute;
                    left: 0.25rem;
                    top: -0.7875rem;
                    width: 7.15rem;
                    height: 0.975rem;
                    background: url(../../assets/img/green/left-title.png) no-repeat;
                    background-size: 100% 100%;
                    color: #08faf5;
                    font-size: 0.2625rem;
                    z-index: 99;
                    span{
                        position: absolute;
                        bottom: 0.1375rem;
                        left: 3.125rem;
                    }
                }
                .right-title-name{
                    position: absolute;
                    right: 0.25rem;
                    top: -0.7875rem;
                    width: 7.15rem;
                    height: 0.975rem;
                    background: url(../../assets/img/green/right-title.png) no-repeat;
                    background-size: 100% 100%;
                    color: #08faf5;
                    font-size: 0.2625rem;
                    z-index: 100;
                    span{
                        position: absolute;
                        bottom: 0.1375rem;
                        right: 2.85rem;
                    }
                }
            }
            .content-area-info{
                display: flex;
                flex-direction: row;
                flex: 1;
                overflow: hidden;
                /* 主体内容公共样式——开始 */
                .border-box{
                    border: 1px solid #18397b;
                    position: relative;
                    margin-top: 0.14rem;
                    .top-light-img{
                        position: absolute;
                        top: 0;
                        left: calc(50% - 3.5rem);
                        width: 7rem;
                        height: 0.9625rem;
                        background: url(../../assets/img/green/light1.png) no-repeat;
                        background-size: 100% 100%;
                    }
                    .bottom-light-img{
                        position: absolute;
                        top: -0.4125rem;
                        left: calc(50% - 2.9375rem);
                        width: 6.2125rem;
                        height: 0.975rem;
                        background: url(../../assets/img/green/light2.png) no-repeat;
                        background-size: 100% 100%;
                        z-index: -1;
                    }
                    .overflow-box{
                        position: relative;
                        width: 100%;
                        height: 100%;
                        overflow: hidden;
                        display: flex;
                        flex-direction: column;
                        font-size: 0.2325rem;
                        /* 选中的切换块样式 */
                        .switch-block-active{
                            font-size: 0.2325rem;
                            color: #23bcef;
                        }
                        /* 未选中的切换块样式 */
                        .switch-block-no{
                            font-size: 0.2rem;
                            color:#ceced5;
                        }
                    }
                }
                /* 小标题名称样式 */
                .every-title-name{
                    position: relative;
                    width: 100%;
                    height: 0.575rem;
                    line-height: 0.575rem;
                    text-align: center;
                    color: #08faf5;
                    font-size: 0.2625rem;
                    #endTime{
                        position: absolute;
                        top: 0.0625rem;
                        right: 0.125rem;
                        color: #ffffff;
                        font-size: 0.15rem;
                    }
                }
                /* 块元素样式 */
                .block-style{
                    height: 1.1875rem;
                    padding: 0.1rem 0;
                    display: flex;
                    flex-direction: row;
                    li{
                        display: flex;
                        flex-direction: column;
                        flex: 1;
                        justify-content: center;
                        align-items: center;
                    }
                    .item-block{
                        border-left: 1px solid #18397b;
                        span:first-of-type{
                            span:first-of-type{
                                font-size: 0.3rem;
                                color: #23bcef;
                                margin-right: 0.075rem;
                            }
                            span:last-of-type{
                                font-size: 0.2rem;
                                color: #ffffff;
                            }
                        }
                        span:last-of-type{
                            font-size: 0.2rem;
                            color: #ffffff;
                            margin-top: 0.0625rem;
                        }
                    }
                    .item-name{
                        font-size: 0.225rem;
                        color: #23bcef;
                    }
                }
                /* 主体内容公共样式——结束 */
                .left-content-row{
                    display: flex;
                    flex-direction: column;
                    width: 7.4rem;
                    padding: 0.1875rem 0 0.1875rem 0.25rem;
                    background: linear-gradient(to right, rgba(0, 1, 39, 1),rgba(4, 9, 63, 0.6),rgba(0, 1, 39, 1));
                    z-index: 10;
                    /* 道路绿化 */
                    .road-green{
                        display: flex;
                        flex-direction: column;
                        height:1.225rem;
                        margin-top: 0.125rem;
                        .greenmsg-box{
                            width: 7.15rem;
                            height:1.225rem;
                            border: 1px solid #18397b;
                            display:flex;
                            flex-direction: row;
                            align-items: center;
                            position: relative;
                            li.green-item{
                                height:0.9rem;
                                display: flex;
                                flex-direction: column;
                                flex: 1;
                                justify-content: center;
                                align-items: center;
                                &:nth-of-type(2){
                                    border-left: 1px solid #18397b;
                                    border-right: 1px solid #18397b;
                                    box-sizing: border-box;
                                }
                                span:first-of-type{
                                    span:first-of-type{
                                        font-size: 0.3rem;
                                        color: #9BFE00;
                                        margin-right: 0.075rem;
                                    }
                                    span:last-of-type{
                                        font-size: 0.2rem;
                                        color: #ffffff;
                                    }
                                }
                                span:last-of-type{
                                    font-size: 0.2rem;
                                    color: #ffffff;
                                    margin-top: 0.0625rem;
                                }
                                #green_road_count {
                                    border-bottom: 1px solid #9BFE00;
                                    cursor: pointer;
                                }
                            }
                        }
                    }
                // 绿化覆盖
                    .green-cover{
                        height:4.50475rem;
                        border: 1px solid #18397b;
                        display:flex;
                        flex-direction: column;
                        ul.cover-top{
                            height:1.075rem;
                            border-bottom: 1px solid #18397b;
                            box-sizing: border-box;
                            display:flex;
                            flex-direction: row;
                            align-items: center;
                            li.cover-item{
                                height:0.8875rem;
                                display: flex;
                                flex-direction: column;
                                flex: 1;
                                justify-content: center;
                                align-items: center;
                                &:nth-of-type(2){
                                    border-left: 1px solid #18397b;
                                    border-right: 1px solid #18397b;
                                    box-sizing: border-box;
                                }
                                span:first-of-type{
                                    span:first-of-type{
                                        font-size: 0.3rem;
                                        color: #9BFE00;
                                        margin-right: 0.075rem;
                                    }
                                    span:last-of-type{
                                        font-size: 0.2rem;
                                        color: #ffffff;
                                    }
                                }
                                span:last-of-type{
                                    font-size: 0.2rem;
                                    color: #ffffff;
                                    margin-top: 0.0625rem;
                                }
                            }
                        }
                        #coverChart{
                            height:3.40475rem;
                            padding-top:0.15rem;
                            padding-right:0.15rem;
                        }
                    }

                //公园广场
                    .park-square{
                        height:4.15rem;
                        .overflow-box{
                            .bridge-switch-block{
                                position: relative;
                                height: 0.5625rem;
                                border-bottom: 1px solid #18397b;
                                line-height: 0.575rem;
                                display: flex;
                                #conSwitchLeft{
                                    width: 3.9625rem;
                                    height: 0.55rem;
                                    background: url(../../assets/img/green/con-switch-left.png) no-repeat;
                                    background-size: 100% 100%;
                                    padding-left: 0.35rem;
                                    cursor: pointer;
                                    text-align: center;
                                }
                                #conSwitchRight{
                                    position: absolute;
                                    top: 0;
                                    right: 0;
                                    width: 3.9625rem;
                                    height: 0.55rem;
                                    background: url(../../assets/img/green/con-switch-right.png) no-repeat;
                                    background-size: 100% 100%;
                                    text-align: center;
                                    cursor: pointer;
                                    text-align: center;
                                }
                                .switch-block-active{
                                    font-size: 0.2325rem;
                                    color: #9BFE00;
                                }
                                .switch-block-no{
                                    font-size: 0.2rem;
                                    color: #ceced5;
                                    background: none !important;
                                }
                            }
                            ul.park-box{
                                width: 7.15rem;
                                height:1.225rem;
                                border: 1px solid #18397b;
                                display:flex;
                                flex-direction: row;
                                align-items: center;
                                li.park-item{
                                    height:0.9rem;
                                    display: flex;
                                    flex-direction: column;
                                    flex: 1;
                                    justify-content: center;
                                    align-items: center;
                                    &:nth-of-type(2){
                                        border-left: 1px solid #18397b;
                                        border-right: 1px solid #18397b;
                                        box-sizing: border-box;
                                    }
                                    span:first-of-type{
                                        span:first-of-type{
                                            font-size: 0.3rem;
                                            color: #9BFE00;
                                            margin-right: 0.075rem;
                                        }
                                        span:last-of-type{
                                            font-size: 0.2rem;
                                            color: #ffffff;
                                        }
                                    }
                                    span:last-of-type{
                                        font-size: 0.2rem;
                                        color: #ffffff;
                                        margin-top: 0.0625rem;
                                    }
                                    #park_count,#square_count{
                                        border-bottom: 1px solid #9BFE00;
                                        cursor: pointer;
                                    }
                                }
                            }
                            .table-head{
                                color:#77cc34;
                                height: 0.575rem;
                                line-height: 0.575rem;
                                tr{
                                    height: 0.575rem;
                                    line-height: 0.575rem;
                                }
                            }
                            .table-body{
                                height: 1.8625rem;
                                color: #fff;
                                overflow: hidden;
                                tr{
                                    height: 0.525rem;
                                    line-height: 0.525rem;
                                }
                            }
                            .table-head,.table-body{
                                font-size: 0.2rem;
                                text-align: center;
                                table{
                                    border-collapse: collapse;
                                    tr {
                                        td{
                                            font-weight: normal !important;
                                            border-bottom: 1px solid #18397b;
                                        }
                                        td:nth-of-type(1){
                                            width: 1.5rem;
                                        }
                                        td:nth-of-type(2){
                                            width: 1.9rem;
                                        }
                                        td:nth-of-type(3){
                                            width: 1.25rem;
                                        }
                                        td:nth-of-type(4){
                                            width: 1.25rem;
                                        }
                                        td:nth-of-type(5){
                                            width: 1.25rem;
                                        }
                                    }
                                }
                            }
                        }
                    }

                }
                .center-content-row{
                    flex: 1;
                }
                .right-content-row{
                    display: flex;
                    flex-direction: column;
                    width: 7.4rem;
                    padding: 0.1875rem 0.25rem 0.1875rem 0;
                    z-index: 10;
                    height: 3.7rem;
                    position: absolute;
                    bottom: 0;
                    right: 0;
                    .every-title-name{
                        background: linear-gradient(to left, rgba(0, 1, 39, 1),rgba(4, 9, 63, 0.6),rgba(0, 1, 39, 1));
                    }
                    /* 道路巡查情况统计图——案件、其他 */
                    .case-statistics{
                        background: linear-gradient(to left, rgba(0, 1, 39, 1),rgba(4, 9, 63, 0.6),rgba(0, 1, 39, 1));
                        height: 2.4625rem;
                        .road-other-data{
                            display: flex;
                            flex-direction: row !important;
                            .left-case-data{
                                width: 2.625rem;
                                border-right: 1px solid #18397b;
                                font-size: 0.2rem;
                                color: #ffffff;
                                padding: 0.125rem;
                                li:first-of-type{
                                    border-bottom: 1px solid #18397b;
                                    p{
                                        line-height: 0.4375rem;
                                        #caseNum{
                                            font-size: 0.325rem;
                                            color: #9BFE00;
                                            margin-right: 0.125rem;
                                        }
                                    }
                                }
                                li:last-of-type{
                                    padding-top: 0.125rem;
                                    p{
                                        line-height: 0.375rem;
                                        #closingRate{
                                            font-size: 0.275rem;
                                            color: #9BFE00;
                                        }
                                        #onTime{
                                            margin-right: 0.1875rem;
                                        }
                                    }
                                }
                            }
                            #rightChart{
                                flex: 1;
                            }
                        }
                    }
                }
            }
        }
    }
</style>
